<template>
    <transition name="fade">
    <div id="friendPage" >
        <!--<input  />-->
        <div id="findFriend">
            <p class="topic">合租协议</p>
            <!--双向数据绑定 不能直接更改父组件的传参-->
            <i class="el-icon-circle-close" @click="$emit('close')" ></i>
            <div>
            <ol>
                <li>合租地点<br/>
                    <div class="el-input el-input--small">
                        <input ref='locationInput' v-model="renterList.input"  class="el-input__inner" placeholder="请输入地点"  />
                    </div>
                    <!--<el-inputv-model="renterList.input" size="small"></el-input>-->
                </li>
                <li>性别<br>
                <ul>
                    <li>本人性别<br/>
                            <el-radio-group v-model="renterList.sex" size="small">
                                <el-radio-button label="男"></el-radio-button>
                                <el-radio-button label="女"></el-radio-button>
                            </el-radio-group>
                    </li>
                    <li>期望舍友性别<br/>
                        <el-radio-group v-model="renterList.wsex" size="small">
                            <el-radio-button label="不限"></el-radio-button>
                            <el-radio-button label="男"></el-radio-button>
                            <el-radio-button label="女"></el-radio-button>
                        </el-radio-group>
                    </li>
                </ul>
                </li>
                <li>房租<br/>
                    <ul>
                        <li>可接受房租/月
                            <el-radio-group v-model="renterList.price" size="small">
                                <el-radio-button label="1000以下"></el-radio-button>
                                <el-radio-button label="1000-2000"></el-radio-button>
                                <el-radio-button label="2000-3000"></el-radio-button>
                                <el-radio-button label="3000以上"></el-radio-button>
                            </el-radio-group>
                        </li>
                    </ul>

                </li>
                <li>生活习惯<br/>
                    <ul>
                        <li>休息时间<br/>
                            <el-radio-group v-model="renterList.restTime" size="small">
                                <el-radio-button label="早睡"></el-radio-button>
                                <el-radio-button label="晚睡"></el-radio-button>
                                <el-radio-button label="白天休息"></el-radio-button>
                            </el-radio-group>
                        </li>
                        <li>宠物<br/>
                            <el-radio-group v-model="renterList.pet" size="small">
                                <el-radio-button label="有"></el-radio-button>
                                <el-radio-button label="无,但可接受"></el-radio-button>
                                <el-radio-button label="不接受宠物"></el-radio-button>
                            </el-radio-group>
                        </li>
                    </ul>
                </li>
                <li>其他要求<br/>
                    <el-input
                            type="textarea"
                            autosize
                            placeholder="请输入内容"
                            v-model="renterList.textarea">
                    </el-input></li>
            </ol>
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </div>
    </div>
    </transition>
</template>

<script>
    import AMap from 'AMap';
    export default {
        name: "Register",
        data(){
            return{
                view:'',
                renterList:{
                    input:'',
                    sex:"男",
                    wsex:"不限",
                    price:"1000以下",
                    restTime:"早睡",
                    pet:"有",
                    textarea:'',
                },
                token:()=>{
                    let reg=/(^| )login_token=([^;]*)(;|$)/;
                    let result= document.cookie.match(reg);
                    return result[2];
                }
            }
        },
        props:['View','updateMsg','houseMsg'],
        methods:{
            submit(){
                let jsonData={
                    token:this.token(),
                    other:this.renterList.textarea,
                    location:this.renterList.input
                };
                switch (this.renterList.wsex) {
                    case '男':jsonData.expectSex=1;break;
                    case '女':jsonData.expectSex=2;break;
                    default: jsonData.expectSex='';break;
                }
                switch (this.renterList.restTime) {
                    case '早睡':jsonData.restTime=1;break;
                    case '晚睡':jsonData.restTime=2;break;
                    default: jsonData.restTime=3;break;
                }
                switch (this.renterList.pet) {
                    case '有':jsonData.pet=1;break;
                    case '无,但可接受':jsonData.pet=2;break;
                    default: jsonData.pet=3;break;
                }
                switch (this.renterList.sex) {
                    case '男':jsonData.sex=1;break;
                    default: jsonData.sex=2;break;
                }
                switch (this.renterList.price) {
                    case '1000以下':jsonData.expectPrice=1;break;
                    case '1000-2000':jsonData.expectPrice=2;break;
                    case '2000-3000':jsonData.expectPrice=3;break;
                    default: jsonData.expectPrice=4;break;
                }
                let geocoder = new AMap.Geocoder({
                    city: "广州", //城市设为北京，默认：“全国”
                });
                if(!this.houseMsg){
                    geocoder.getLocation(this.renterList.input,(status,res)=>{
                        if(status === 'complete'){
                            jsonData.lon=res.geocodes[0].location.lng;
                            jsonData.lat=res.geocodes[0].location.lat;
                            if(this.updateMsg){
                                jsonData.operate = 2;
                                jsonData.id = this.updateMsg.id;
                            }else{
                                jsonData.operate = 1;
                            }
                            this.$axios.post(this.Global.api+'/index.php/index/hzInfoInsertOrUpdate',this.$qs.stringify(jsonData),{headers:{
                                    'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
                                }}).then(res=>
                            {
                                if(res.status>=200&&res.status<300&&res.data.res===0)
                                {
                                    alert('提交合租要求成功！！！');
                                    this.$emit('close');
                                }
                                else{
                                    alert('提交合租要求不成功，请确认信息无误')
                                }
                            })
                        }else {
                            alert("无法查找到位置，请更改合租地点！")
                        }
                    });
                }else{
                    jsonData.operate = 1;
                    jsonData.hid=this.houseMsg.id;
                    jsonData.lon=this.houseMsg.position_lon;
                    jsonData.lat=this.houseMsg.position_lon;
                    this.$axios.post(this.Global.api+'/index.php/index/hzInfoInsertOrUpdate',this.$qs.stringify(jsonData),{headers:{
                            'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
                        }}).then(res=>
                    {
                        if(res.status>=200&&res.status<300&&res.data.res===0)
                        {
                            alert('提交合租要求成功！！！');
                            this.$emit('close');
                        }
                        else{
                            if(res.data.msg==='此房源已在合租伙伴里发布'){
                                alert("此房源已被发布，请勿重复发布")
                            }else{
                                alert('提交合租要求不成功，请确认信息无误')
                            }
                        }
                    })
                }

            },
            getState(){
                if(this.updateMsg){
                    this.renterList.input=this.updateMsg.location;
                    switch (this.updateMsg.expectPrice) {
                        case 1:this.renterList.price = '1000以下';break;
                        case 2:this.renterList.price = '1000-2000';break;
                        case 3:this.renterList.price = '2000-3000';break;
                        default:this.renterList.price = '3000以上';break;
                    }
                    switch (this.updateMsg.expectSex) {
                        case 1:this.renterList.wsex = '男';break;
                        case 2:this.renterList.wsex = '女';break;
                        default:this.renterList.wsex = '不限';break;
                    }
                    switch (this.updateMsg.restTime) {
                        case 1:this.renterList.restTime = '早睡';break;
                        case 2:this.renterList.restTime = '晚睡';break;
                        default:this.renterList.restTime = '白天休息';break;
                    }
                    switch (this.updateMsg.pet) {
                        case 1:this.renterList.pet = '有';break;
                        case 2:this.renterList.pet = '无,但可接受';break;
                        default:this.renterList.pet = '不接受宠物';break;
                    }
                    switch (this.updateMsg.sex) {
                        case 1:this.renterList.sex = '男';break;
                        default:this.renterList.sex = '女';break;
                    }
                    if(this.updateMsg.other){
                        this.renterList.textarea=this.updateMsg.other;
                    }
                }
                if(this.houseMsg){
                    this.renterList.input=this.houseMsg.location;
                }
            }
        },
        created(){
            this.getState();
        },
        mounted(){
            this.Autocomplete= new AMap.Autocomplete({
                city:'广州市',
                input: this.$refs.locationInput,
            });
            this.Autocomplete.on('select',res=>{
                this.renterList.input=res.poi.name;
            });
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s ease;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    #friendPage{
    }
    #findFriend{
        position: relative;
        background-color: white;
        width: 500px;
        height: 95vh;
        max-height: 625px;
        z-index: 5;
        box-shadow: #515151;
        border-radius: 10px;
    }

    #findFriend i{
        font-size: 35px;
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ff0a60;
        font-weight: bolder;
    }
    #findFriend i:hover{
        filter: opacity(90%);
        cursor: pointer;
    }
    .topic{
        font-size: x-large;
        text-align: center;
        margin-top: 15px;
        position: relative;
    }
    #findFriend p{
        width: 100%;
        font-weight: bold;
    }
    #findFriend div{
        width: 100%;
        height: calc(100% - 60px);
        margin: 0 auto;
        color: #ff0a60;
        font-size: large;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #findFriend div::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }
    #findFriend div::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(255, 10, 96, 0.7);
        background: rgba(255, 10, 96, 0.71);
    }
    #findFriend div::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
    #findFriend ol{
        width: 80%;
        margin: 0 auto;
    }
    #findFriend ol li{
        list-style-type: decimal;
        margin-bottom: 3px;
    }
    #findFriend div>ol>li:nth-child(1){
        position: relative;
        bottom: -5px;
    }
    #findFriend .el-input{
        display: inline-block;
        width: 70%;
        font-size: 13px;
    }
    #findFriend .el-textarea{
        font-size: 13px;
    }
    #findFriend ol li ul li{
        list-style-type: circle;
        margin-left: 10px;
        font-size: medium;
    }
    #findFriend .el-button{
        margin-top: 5px;
        margin-bottom: 10px;
        margin-left: calc((100% - 100px)/2) ;
        width: 100px;
    }
</style>